import React from 'react';
import MainUI from '../../components/layout/MainUI';
import {connect} from 'dva';
import moment from 'moment';

import styles2 from './css/dashboard.less';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Input,
  Row,
  Tabs,
  Table,
  Icon,
  DatePicker,
} from 'antd';

const RangePicker  = DatePicker.RangePicker ;
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
};

class InOutDayRecord extends React.Component {

  state = {
    columns: [
      {
        title: '类型', dataIndex: 'type', width:200,render: (value) => {
        let text = '未知';
        switch (value) {
          case 1:
            text = '顾客充值';
            break;
          case 2:
            text = '现金付款';
            break;
          case 3:
            text = '余额付款';
            break;
          case 4:
            text = '其他出款';
            break;
        }
        if (value == 4) {
          return <font color='red' size={2}>{
            text
          }</font>;
        } else {
          return <font color='green' size={2}>{
            text
          }</font>;
        }

      }
      },
      {title: '服务员工', dataIndex: 'serviceName',width: 200,},
      {
        title: '金额(元)', dataIndex: 'money', width: 200,render: (value, row) => {
        if (row.type === 4) {
          return <font color='red' size={2}>￥ -{value}</font>;
        } else {
          return <font color='green' size={2}>￥ {value}</font>;
        }

      }
      },
      {title: '备注', dataIndex: 'comment',width: 400,},
      {
        title: '日期', dataIndex: 'date', width: 200,render: (value) => {
        return moment(value).format("YYYY-MM-DD")
      }
      },
      {
        title: '操作时间',width: 200, dataIndex: 'createDate', render: (value) => {
        return moment(value).format("YYYY-MM-DD HH:mm:ss")
      }
      },
    ],
    cellphone: null,
    dateRage:null,
    dateRageS:[],
  };
  search = () => {
    const params={};
    if(this.state.dateRageS!=null&&this.state.dateRageS.length>0){
      params.startDay=this.state.dateRageS[0];
      params.endDay=this.state.dateRageS[1];
    }
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {
      } else {
        this.props.dispatch({
          type: 'finance/e_getInOutDayRecords',
          payload: {...values,...params}
        });
      }
    });
  };
  searchCurrent = () => {
    this.props.dispatch({
      type: 'finance/e_getInOutCurrentDayRecords',
      payload:{cellphone:this.state.cellphone}
    });
  };

  render() {
    let i_koufei = 0;
    let i_xianjin = 0;
    let i_chongzhi = 0;
    let i_chu = 0;

    let ic_koufei = 0;
    let ic_xianjin = 0;
    let ic_chongzhi = 0;
    let ic_chu = 0;

    if (this.props.inOutDayRecords != null) {
      this.props.inOutDayRecords.map((o) => {
        if (o.type === 1) {
          i_chongzhi += o.money;
        } else if (o.type === 2) {
          i_xianjin += o.money;
        } else if (o.type === 3) {
          i_koufei += o.money;
        } else if (o.type === 4) {
          i_chu -= o.money;
        }


      });
    }
    ;
    if (this.props.inOutCurrentDayRecords != null) {
      this.props.inOutCurrentDayRecords.map((o) => {
        if (o.type === 1) {
          ic_chongzhi += o.money;
        } else if (o.type === 2) {
          ic_xianjin += o.money;
        } else if (o.type === 3) {
          ic_koufei += o.money;
        } else if (o.type === 4) {
          ic_chu -= o.money;
        }


      });
    }
    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 财务管理</Breadcrumb.Item>
          <Breadcrumb.Item> 日流水</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>

            <div className={styles2.salesCard}>
          <Tabs >
            <TabPane tab={<span style={{marginLeft: 5, fontSize: 18}}>今日流水</span>} key="currentInout">
              <Row>
                <Col span={6}>
                  <FormItem {...formItemLayout} label='服务员工电话'>
                    <Input placeholder="手机号"  onChange={(e)=>{
                      const state=this.state;
                      state.cellphone=e.target.value;
                      this.setState(state);
                    }} value={this.state.cellphone} suffix={<Icon type='phone'/>}/>
                  </FormItem>
                </Col>
                <Col span={2}>
                  <Button style={{marginLeft: 8, marginTop: '3px'}} onClick={() => {
                    const state=this.state;
                    state.cellphone=null;
                    this.setState(state);
                  }}>
                    清空
                  </Button>
                </Col>
                <Col span={16} style={{textAlign: 'right'}}>
                  <Button type="primary" icon="retweet" onClick={() => {
                    this.searchCurrent();
                  }}>刷新</Button><span className="ant-divider"/>
                </Col>
              </Row>
              <Row style={{marginTop: 30,
                backgroundColor: '#e6f7ff',}}>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>会员扣费收入</span>
                    <p style={{fontSize: 24, color: "green", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {ic_koufei.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>现金付款收入</span>
                    <p style={{fontSize: 24, color: "green", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {ic_xianjin.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>会员充值收入</span>
                    <p style={{fontSize: 24, color: "green", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {ic_chongzhi.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>其他支出</span>
                    <p style={{fontSize: 24, color: "red", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {ic_chu.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>实际现金收入</span>
                    <p style={{fontSize: 24, color: "red", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {(ic_chongzhi + ic_xianjin + ic_chu).toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>实际工作收入</span>
                    <p style={{fontSize: 24, color: "red", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {(ic_koufei + ic_xianjin).toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
              </Row>
                <Row>
                {<Table bordered={true} rowKey='id' style={{marginTop: '10px'}}
                        columns={this.state.columns}
                        scroll={{ y: 400 }}
                        dataSource={this.props.inOutCurrentDayRecords} pagination={false}/>}
              </Row>
            </TabPane>
            <TabPane tab={<span style={{marginLeft: 5, fontSize: 18}}>最近流水</span>} key="inout">
              <Form className="ant-advanced-search-form">
                <Row>
                  <Col span={6}>
                    <FormItem {...formItemLayout} label='服务员工电话'>
                      {this.props.form.getFieldDecorator('cellphone', {
                        rules: [
                          {
                            message: "请输入手机号",
                            type: "string",
                            pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                          },
                        ],
                      })(
                        <Input placeholder="手机号" onchan suffix={<Icon type='phone'/>}/>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem {...formItemLayout} label='日期'>
                      <RangePicker onChange={(dates,dateStrings)=>{
                        const state=this.state;
                        state.dateRage=dates;
                        state.dateRageS=dateStrings;
                        this.setState(state);
                      }} value={this.state.dateRage} allowClear={false} style={{marginTop:3}}/>
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <Button style={{marginLeft: 8, marginTop: '3px'}} onClick={() => {
                      this.props.form.resetFields();
                      const state=this.state;
                      state.dateRage=null;
                      state.dateRageS=[];
                      this.setState(state);
                    }}>
                      清空
                    </Button>
                  </Col>
                  <Col span={10} style={{textAlign: 'right'}}>
                    <Button type="primary" icon="retweet" onClick={() => {
                      this.search();
                    }}>刷新</Button><span className="ant-divider"/>
                  </Col>
                </Row>
              </Form>
              <Row style={{marginTop: 30,
                backgroundColor: '#e6f7ff',}}>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>会员扣费收入</span>
                    <p style={{fontSize: 24, color: "green", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {i_koufei.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>现金付款收入</span>
                    <p style={{fontSize: 24, color: "green", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {i_xianjin.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>会员充值收入</span>
                    <p style={{fontSize: 24, color: "green", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {i_chongzhi.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>其他支出</span>
                    <p style={{fontSize: 24, color: "red", fontWeight: 'bold ', marginTop: 15}}>￥ {i_chu.toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>实际现金收入</span>
                    <p style={{fontSize: 24, color: "red", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {(i_chongzhi + i_xianjin + i_chu).toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
                <Col sm={4} xs={24}>
                  <div style={{
                    paddingTop: 15,
                    paddingBottom: 25,
                    border: '1px solid #e9e9e9',
                    borderLeft: '0px',
                    textAlign: 'center',
                  }}>
                    <span style={{fontSize: 16}}>实际工作收入</span>
                    <p style={{fontSize: 24, color: "red", fontWeight: 'bold ', marginTop: 15}}>
                      ￥ {(i_koufei + i_xianjin).toFixed(2)}</p>
                    <em/>
                  </div>
                </Col>
              </Row>
                <Row>
                {
                  <Table bordered={true} rowKey='id' style={{marginTop: '10px'}}
                        columns={this.state.columns}
                        scroll={{y: 400 }}
                        dataSource={this.props.inOutDayRecords} pagination={false}/>
                }
              </Row>
            </TabPane>
          </Tabs>
            </div>
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    inOutDayRecords: state.finance.inOutDayRecords,
    inOutCurrentDayRecords: state.finance.inOutCurrentDayRecords,
  }
}

export default connect(mapStateToProps)(Form.create()(InOutDayRecord));
